<template>
	<div>
		<ul class="list">
			<li v-for="item in jokeList">{{ item }}</li>
		</ul>
	</div>
</template>

<script>
import request from "../../utils/request.js";
export default {
	name: 'Joke',
	data() {
		return {
			jokeList: [],
			num: 15,
			apiURL: process.env.VUE_APP_BASE_JOKE_TARGET
		};
	},
	created() {
		this.handleGetJoke();
	},
	methods: {
		handleGetJoke() {
			var that = this;
			request({
				url: that.apiURL + '/joke/list',
				methods: 'get',
				params: { num: that.num }
			}).then(function(res) {
				that.jokeList = res.data.jokes;
				console.log(that.jokeList);
			});
		}
	}
};
</script>

<style scoped="scoped">
.list {
	list-style: none;
}
.list li {
	text-align: left;
	border-bottom: 1px dotted #13ce66;
	line-height: 30px;
	margin-bottom: 20px;
}
</style>
